<!DOCTYPE html>
<html>
<style>
ul {
    width: 978px;
    position: absolute;
    left: -2070px;
}

li {
    position: absolute;
    left: -690px;
}

#container {
    height: 400px;;
    position: relative;
    overflow: hidden;
}
</style>
<body>
<div>This test checks that moving a positioned element with positioned children invalidates correctly.</div>
<div>The image below should be completely invalidated.</div>
<div id="container">
    <ul id="list">
        <li>
            <img src="../resources/apple.jpg">
        </li>
    </ul>
</div>

<script src="../resources/text-based-repaint.js"></script>
<script>
function setUp() {
    var elSlider = document.getElementById("list");
    elSlider.style.left = "590px";
    elSlider.offsetLeft;

    runRepaintTest();
}

function repaintTest() {
    var elSlider = document.getElementById("list");
    elSlider.style.left = "690px";
};

window.addEventListener("load", setUp, false);
</script>
</body></html>
